<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>后台管理 - libman</title>
		<link rel="stylesheet" href="./css/management.css"/>
		<!-- UIkit JS -->
		<link rel="stylesheet" href="./css/uikit.min.css" />
		<script src="./js/uikit.min.js"></script>
		<script src="./js/uikit-icons.min.js"></script>
		<!-- jquery相关依赖 -->
		<script src="./js/jquery.min.js"></script>
		<script src="./js/jquery.pjax.min.js"></script>
		<!-- Toastify依赖 -->
		<script src="./Toastify/toastify-js.js"></script>
		<script src="./Toastify/diyPopStyle.js"></script>
		<link rel="stylesheet" href="./Toastify/toastify.min.css"/>
		<!-- Vue3依赖 -->
		<script src="js/vue.global.prod.js"></script>
		<!-- 控制页面大小 -->
		<script src="./js/ConsistentScaling.js"></script>
	</head>
	<body  id="info">
		<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
			<nav class="uk-navbar-container" uk-navbar>
				<div class="uk-navbar-left uk-margin-large-left uk-margin-right">
		
					<ul class="uk-navbar-nav">
						<li><a href="/">首页</a></li>
						<li class="uk-active ">
							<a href="/management.html">管理中心 <span uk-navbar-parent-icon></span></a>
							<div class="uk-navbar-dropdown">
								<ul class="uk-nav uk-navbar-dropdown-nav">
									<li class="uk-active">个人信息</li>
									<li><a href="/management.html">个人信息查看</a></li>
									<li class="uk-nav-header">书籍借阅</li>
									<li><a href="/management.html">藏书列表</a></li>
									<li><a href="/management.html">归还图书</a></li>
									<li class="uk-nav-divider"></li>
									<li><a href="/management.html" v-if="user.user_role=='Admin'">管理中心</a></li>
								</ul>
							</div>
						</li>
						<li><a href="#">LibMan</a></li>
					</ul>
		
				</div>
				<div class="uk-navbar-right uk-margin-large-right">
		
					<ul class="uk-navbar-nav">
						<li v-if="user.user_name" v-cloak>
							<a href="#">{{user.user_name}} <span uk-navbar-parent-icon></span></a>
							<div class="uk-navbar-dropdown">
								<ul class="uk-nav uk-navbar-dropdown-nav">
									<li class="uk-active">个人信息</li>
									<li><a href="/management.html">个人中心</a></li>
									<li class="uk-nav-divider"></li>
									<li><a href="#">退出登陆</a></li>
								</ul>
							</div>
						</li>
						<li v-else>
							<a href="./login.html">立即登录</a>
						</li>
					</ul>
				</div>
			</nav>
		</div>
		<main>
			<div class="container uk-box-shadow-xlarge uk-padding uk-align-center uk-flex" id="top">
				<div class="navigation uk-width-1-5 uk-height-1-1" >
					<div class="uk-card uk-card-default uk-card-body">
					    <ul class="uk-nav-default uk-nav-parent-icon" uk-nav uk-switcher="connect: .switcher-container;animation: uk-animation-slide-left-medium, uk-animation-slide-right-medium">
							<div class="uk-margin uk-margin-top uk-margin-left uk-align-center">信息设置</div>
							<li class="uk-active uk-margin-bottom"><a href="javascript:;"><span class="uk-margin-small-right" uk-icon="icon: user"></span> 个人基本信息</a></li>
					        <div class="uk-margin uk-margin-top uk-margin-left uk-align-center">书籍借阅</div>
					        <li class="uk-margin-bottom"><a href="javascript:;"><span class="uk-margin-small-right" uk-icon="icon: file-text"></span> 藏书列表</a></li>
					        <li class="uk-margin-bottom"><a href="javascript:;"><span class="uk-margin-small-right" uk-icon="icon: bookmark"></span> 归还图书</a></li>
							<div class="uk-margin uk-margin-top uk-margin-left uk-align-center" v-if="user.user_role=='Admin'">书籍管理</div>
							<li class="uk-margin-bottom" v-if="user.user_role=='Admin'"><a href="javascript:;"><span class="uk-margin-small-right" uk-icon="icon: code"></span> 归还审核</a></li>
							<li class="uk-margin-bottom" v-if="user.user_role=='Admin'"><a href="javascript:;"><span class="uk-margin-small-right" uk-icon="icon: code"></span> 添加书籍</a></li>
							<li class="uk-margin-bottom" v-if="user.user_role=='Admin'"><a href="javascript:;"><span class="uk-margin-small-right" uk-icon="icon: code"></span> 下架书籍</a></li>
					        <hr>
					        <li class="uk-margin"><a href="javascript:;"><span class="uk-margin-small-right" uk-icon="icon: close"></span> 注销</a></li>
					    </ul>
					</div>
				</div>
				<div class="main-info uk-width-expand uk-height-1-1">
					<ul class="uk-nav-parent-icon uk-switcher switcher-container">
						<li class="info uk-flex uk-flex-center uk-flex-middle" >
							<div class="info-framework uk-margin-large uk-margin-large-top uk-flex-center uk-flex-middle">
								<div class="info-avatar uk-flex uk-flex-center uk-flex-middle">
									<img class="uk-border-circle uk-margin" :src="user.userPic ? user.userPic : './img/avatar.png'" width="200" height="200" alt="用户头像">
									<div>欢迎您，{{ user.user_name }}！您的账户身份为<span class="info-identity uk-margin-small-left">{{ user.user_role=='Admin' ? '管理员' : '用户' }}</span></div>
								</div>
								<div class="info-main uk-margin-large">
									<div class="uk-column-1-2 uk-column-divider">
									    <p>登录用户名:&ensp;<span class=uk-text-large>{{ user.user_name }}</span><span class="uk-text-meta"><br>用户名是用于登录的唯一标识</span></p>
										<p>用户昵称:&ensp;<span class=uk-text-large>{{ user.user_name }}</span><span class="uk-text-meta"><br>用户昵称是用来展示的名字</span></p>
									    <blockquote cite="#" class="uk-column-span">
									        <p>{{ yiyan.content }}</p>
									        <footer>Originating from <cite><a href="javascript:;" class="uk-text-primary">{{ yiyan.origin }}</a></cite></footer>
									    </blockquote>
										<p>邮箱地址:&ensp;<span class=uk-text-large>{{ user.user_email }}</span><span class="uk-text-meta"><br>邮箱地址可以接收通知以及修改密码</span></p>
										<p class="uk-margin-remove uk-padding uk-padding-remove-left uk-padding-remove-right">用户状态:&ensp;{{user.user_status =='0' ? '正常' : '禁用' }}<span class="uk-text-meta"><br>您用户当前的状态</span></p>
									</div>
								</div>
							</div>
						</li>

						<li class="info uk-flex uk-flex-center uk-flex-middle" style="flex-direction: column">
							<div class="info-framework uk-margin uk-flex-center uk-flex-middle">
								<div class="uk-text-large uk-margin-large-top uk-width-3-5">
									藏书列表
									<p class="uk-text-meta">
										所有藏书都在这里，快来借阅叭！
									</p>
								</div>
								<article class="uk-comment uk-width-3-5 uk-card uk-card-default uk-card-body uk-align-center uk-width-xlarge" v-for="(item, index) in currentPageData" :key="index" v-if="total!=0">
									<div class="uk-card-badge uk-label" v-if="item.book_status==0">可借阅</div>
									<div class="uk-card-badge uk-label uk-label-warning" v-if="item.book_status==1">借阅中</div>
									<div class="uk-card-badge uk-label uk-label-warning" v-if="item.book_status==2">归还中</div>
									<div class="uk-card-badge uk-label uk-label-danger" v-if="item.book_status==3">已下架</div>
								    <header class="uk-comment-header uk-grid-medium uk-flex-middle" uk-grid>
							
								        <div class="uk-width-expand">
								            <h4 class="uk-comment-title uk-margin-remove"><a class="uk-link-reset" href="#">{{ item.book_name }}</a></h4>
								            <ul class="uk-comment-meta uk-subnav uk-subnav-divider uk-margin-remove-top">
								                <li>更新时间:<a href="#">{{ item.book_uploadtime }}</a></li>
								                <li class="uk-padding-remove uk-margin-small"><span class="uk-align-left uk-margin-remove">
													ISBN:
													<span v-cloak>{{ item.book_isbn }}</span>
												</span></li>
												<li class="uk-padding-remove uk-margin-small"><span class="uk-align-left uk-margin-remove">
													总页数:
													<span v-cloak>{{ item.book_pagination }}</span>
												</span></li>
								            </ul>
								        </div>
								    </header>
								    <div class="uk-comment-body">
								        <p v-if="item.book_press" class="info-article">出版社：{{item.book_press}}</p>
										<p v-if="item.book_author" class="info-article">作者：{{item.book_author}}</p>
								    </div>
									<div class="uk-margin" v-cloak>
										<span>书籍ID：<span style="color: rgb(30, 135, 240);">{{item.book_id}}</span></span>
										<button class="uk-button uk-button-primary uk-align-right uk-margin-remove" :uk-toggle="getToggleTarget(item.book_id)" v-if="item.book_status==0">￥{{item.book_price}}</button>
										<button class="uk-button uk-button-primary uk-align-right uk-margin-remove" v-else disabled>当前状态下不可借阅</button>
										<button class="uk-button uk-button-danger uk-align-right uk-margin-remove" @click="offBook(item.book_id)" v-if="item.book_status==0&&user.user_role=='Admin'">下架</button>
										
									</div>
									<!-- 拟态对话框 -->
									<div :id="'modal-example'+item.book_id" uk-modal>
									    <div class="uk-modal-dialog uk-modal-body">
											<button class="uk-modal-close-default" uk-close></button>
									        <h2 class="uk-modal-title">操作确认</h2>
									        <p>
												您即将借阅一篇名为<span class="uk-text-secondary">《{{ item.book_name }}》</span>的图书。<br>
												请确认这是您的意图，并且您已经做好了充足的资金(￥{{item.book_price}})来借阅此图书。<br>
												如果您有任何疑问或需要帮助，请立即联系支持团队。<br><br>
												请您在一个月内归还此书，否则将会根据违约情况<span class="uk-text-danger uk-text-bolder">纳入个人信用评价</span>。<br>
												<span class="uk-text-primary">
													请按下按钮“确认借阅”以继续，或者按其他按钮取消操作。
												</span>
											</p>
									        <p class="uk-text-right">
												<button class="uk-button uk-button-primary uk-modal-close uk-margin-right" @click="borrow(item.book_id)">确认借阅</button>
									            <button class="uk-button uk-button-default uk-modal-close uk-margin-left">取消</button>
									        </p>
									    </div>
									</div>
									<!-- 拟态对话框结束 -->
								</article>
								<ul class="pagination uk-flex-center  uk-margin-large" v-if="total!=0">
								    <li><button @click="gotoTop();goToPage(currentPage - 1)" :disabled="currentPage === 1" class="uk-button uk-button-primary"><span class="uk-margin-small-right" uk-pagination-previous></span> 上一页</button></li>
									<span class="uk-margin-large-right uk-margin-large-left">{{ currentPage }} / {{ totalPages }}</span>
								    <li><button @click="gotoTop();goToPage(currentPage + 1)" :disabled="currentPage === totalPages" class="uk-button uk-button-primary">下一页<span class="uk-margin-small-left" uk-pagination-next></span></button></li>
								</ul>
								<div class="uk-alert-primary uk-margin-large" uk-alert v-if="total==0">
									<h3>啊哦！</h3>
								    <p>还没有发布图书信息噢，快去开始找管理员更新信息叭~</p>
								</div>
							</div>
						</li>
					    <li  class="info uk-flex uk-flex-center uk-flex-middle" style="flex-direction: column">
							<div class="info-framework uk-margin uk-flex-center uk-flex-middle">
								<div class="uk-text-large uk-margin-large-top uk-width-3-5">
									归还图书
									<p class="uk-text-meta">
										所有需要归还的书在这里！
									</p>
								</div>
								<article class="uk-comment uk-width-3-5 uk-card uk-card-default uk-card-body uk-align-center uk-width-xlarge" v-for="(item, index) in Return_currentPageData" :key="index" v-if="Return_total!=0">
									<div class="uk-card-badge uk-label" v-if="item.book_status==0">可借阅</div>
									<div class="uk-card-badge uk-label uk-label-warning" v-if="item.book_status==1">借阅中</div>
									<div class="uk-card-badge uk-label uk-label-warning" v-if="item.book_status==2">归还中</div>
									<div class="uk-card-badge uk-label uk-label-danger" v-if="item.book_status==3">已下架</div>
								    <header class="uk-comment-header uk-grid-medium uk-flex-middle" uk-grid>
							
								        <div class="uk-width-expand">
								            <h4 class="uk-comment-title uk-margin-remove"><a class="uk-link-reset" href="#">{{ item.book_name }}</a></h4>
								            <ul class="uk-comment-meta uk-subnav uk-subnav-divider uk-margin-remove-top">
								                <li>更新时间:<a href="#">{{ item.book_uploadtime }}</a></li>
								                <li class="uk-padding-remove uk-margin-small"><span class="uk-align-left uk-margin-remove">
													ISBN:
													<span v-cloak>{{ item.book_isbn }}</span>
												</span></li>
												<li class="uk-padding-remove uk-margin-small"><span class="uk-align-left uk-margin-remove">
													总页数:
													<span v-cloak>{{ item.book_pagination }}</span>
												</span></li>
								            </ul>
								        </div>
								    </header>
								    <div class="uk-comment-body">
								        <p v-if="item.book_press" class="info-article">出版社：{{item.book_press}}</p>
										<p v-if="item.book_author" class="info-article">作者：{{item.book_author}}</p>
								    </div>
									<div class="uk-margin" v-cloak>
										<button class="uk-button uk-button-primary uk-align-right uk-margin-remove" :uk-toggle="Return_getToggleTarget(item.book_id)" v-if="item.book_status==1">归还</button>
										<button class="uk-button uk-button-primary uk-align-right uk-margin-remove" v-else disabled>当前状态下不可归还</button>
									</div>
									<!-- 拟态对话框 -->
									<div :id="'Return_modal-example'+item.book_id" uk-modal>
									    <div class="uk-modal-dialog uk-modal-body">
											<button class="uk-modal-close-default" uk-close></button>
									        <h2 class="uk-modal-title">操作确认</h2>
									        <p>
												您即将归还一篇名为<span class="uk-text-secondary">《{{ item.book_name }}》</span>的图书。<br>
												如果您有任何疑问或需要帮助，请立即联系支持团队。<br><br>
												请您在一个月内归还此书，否则将会根据违约情况<span class="uk-text-danger uk-text-bolder">纳入个人信用评价</span>。<br>
												<span class="uk-text-primary">
													请按下按钮“确认归还”以继续，或者按其他按钮取消操作。
												</span>
											</p>
									        <p class="uk-text-right">
												<button class="uk-button uk-button-primary uk-modal-close uk-margin-right" @click="Return(item.book_id)">确认借阅</button>
									            <button class="uk-button uk-button-default uk-modal-close uk-margin-left">取消</button>
									        </p>
									    </div>
									</div>
									<!-- 拟态对话框结束 -->
								</article>
								<ul class="pagination uk-flex-center  uk-margin-large" v-if="Return_total!=0">
								    <li><button @click="gotoTop();Return_goToPage(Return_currentPage - 1)" :disabled="Return_currentPage === 1" class="uk-button uk-button-primary"><span class="uk-margin-small-right" uk-pagination-previous></span> 上一页</button></li>
									<span class="uk-margin-large-right uk-margin-large-left">{{ Return_currentPage }} / {{ Return_totalPages }}</span>
								    <li><button @click="gotoTop();Return_goToPage(Return_currentPage + 1)" :disabled="Return_currentPage === Return_totalPages" class="uk-button uk-button-primary">下一页<span class="uk-margin-small-left" uk-pagination-next></span></button></li>
								</ul>
								<div class="uk-alert-primary uk-margin-large" uk-alert v-if="Return_total==0">
									<h3>啊哦！</h3>
								    <p>还没有要归还的图书信息噢，快去开始借一本新的叭~</p>
								</div>
							</div>
						</li>
						<li v-if="user.user_role=='Admin'" class="info uk-flex uk-flex-center uk-flex-middle" style="flex-direction: column">
							<div class="info-framework uk-margin uk-flex-center uk-flex-middle">
								<div class="uk-text-large uk-margin-large-top uk-width-3-5">
									归还审核
									<p class="uk-text-meta">
										管理员的权利和责任，认真仔细！
									</p>
								</div>
								<article class="uk-comment uk-width-3-5 uk-card uk-card-default uk-card-body uk-align-center uk-width-xlarge" v-for="(item, index) in pass_currentPageData" :key="index" v-if="pass_total!=0">
									<div class="uk-card-badge uk-label" v-if="item.book_status==0">可借阅</div>
									<div class="uk-card-badge uk-label uk-label-warning" v-if="item.book_status==1">借阅中</div>
									<div class="uk-card-badge uk-label uk-label-warning" v-if="item.book_status==2">归还中</div>
									<div class="uk-card-badge uk-label uk-label-danger" v-if="item.book_status==3">已下架</div>
								    <header class="uk-comment-header uk-grid-medium uk-flex-middle" uk-grid>
							
								        <div class="uk-width-expand">
								            <h4 class="uk-comment-title uk-margin-remove"><a class="uk-link-reset" href="#">{{ item.book_name }}</a></h4>
								            <ul class="uk-comment-meta uk-subnav uk-subnav-divider uk-margin-remove-top">
								                <li>更新时间:<a href="#">{{ item.book_uploadtime }}</a></li>
								                <li class="uk-padding-remove uk-margin-small"><span class="uk-align-left uk-margin-remove">
													ISBN:
													<span v-cloak>{{ item.book_isbn }}</span>
												</span></li>
												<li class="uk-padding-remove uk-margin-small"><span class="uk-align-left uk-margin-remove">
													总页数:
													<span v-cloak>{{ item.book_pagination }}</span>
												</span></li>
								            </ul>
								        </div>
								    </header>
								    <div class="uk-comment-body">
								        <p v-if="item.book_press" class="info-article">出版社：{{item.book_press}}</p>
										<p v-if="item.book_author" class="info-article">作者：{{item.book_author}}</p>
								    </div>
									<div class="uk-margin" v-cloak>
										<span>书籍ID：<span style="color: rgb(30, 135, 240);">{{item.book_id}}</span></span>
										<button class="uk-button uk-button-primary uk-align-right uk-margin-remove" @click="pass(item.book_id)" v-if="item.book_status==2">通过</button>
										<button class="uk-button uk-button-primary uk-align-right uk-margin-remove" v-else disabled>当前状态下不可通过</button>
									</div>
								</article>
								<ul class="pagination uk-flex-center  uk-margin-large" v-if="pass_total!=0">
								    <li><button @click="gotoTop();pass_goToPage(currentPage - 1)" :disabled="pass_currentPage === 1" class="uk-button uk-button-primary"><span class="uk-margin-small-right" uk-pagination-previous></span> 上一页</button></li>
									<span class="uk-margin-large-right uk-margin-large-left">{{ pass_currentPage }} / {{ pass_totalPages }}</span>
								    <li><button @click="gotoTop();pass_goToPage(currentPage + 1)" :disabled="pass_currentPage === pass_totalPages" class="uk-button uk-button-primary">下一页<span class="uk-margin-small-left" uk-pagination-next></span></button></li>
								</ul>
								<div class="uk-alert-success uk-margin-large" uk-alert v-if="pass_total==0">
									<h3>完成！</h3>
								    <p>没有需要审核的文章！</p>
								</div>
							</div>
						</li>
						<li v-if="user.user_role=='Admin'" class="info uk-flex uk-flex-center uk-flex-middle" style="flex-direction: column">
							<div class="info-framework uk-margin uk-flex-center uk-flex-middle" style="width: 35%">
								<div class="uk-text-large uk-margin-large-top uk-width-3-5">
									添加图书
									<p class="uk-text-meta">
										源源不断的泉水从这里涌出！
									</p>
								</div>
								<div class="uk-grid-small" uk-grid>
								    <div class="uk-width-1-1">
								        <input class="uk-input" type="text" placeholder="要添加的书名" id="book_name">
								    </div>
								    <div class="uk-width-1-2@s">
								        <input class="uk-input" type="text" placeholder="ISBN码" id="book_isbn">
								    </div>
								    <div class="uk-width-1-4@s">
								        <input class="uk-input" type="text" placeholder="价格" id="book_price">
								    </div>
								    <div class="uk-width-1-4@s">
								        <input class="uk-input" type="text" placeholder="总页数" id="book_pagination">
								    </div>
								    <div class="uk-width-1-2@s">
								        <input class="uk-input" type="text" placeholder="出版社" id="book_press">
								    </div>
								    <div class="uk-width-1-2@s">
								        <input class="uk-input" type="text" placeholder="作者" id="book_author">
								    </div>
								</div>
								<button class="uk-button uk-button-primary uk-button-large uk-margin-top" @click="addBook()">提交</button>
							</div>
						</li>
						<li  class="info uk-flex uk-flex-center uk-flex-middle" style="flex-direction: column">
							<div class="info-framework uk-margin uk-flex-center uk-flex-middle" style="width: 35%">
								<div class="uk-text-large uk-margin-large-top uk-width-3-5">
									删除图书
									<p class="uk-text-meta">
										只有已下架的图书才能被删除噢~
									</p>
								</div>
								<div class="uk-grid" uk-grid>
								    <div class="uk-width-1-1 uk-margin-large-top">
								        <input class="uk-input" type="text" placeholder="待删除书籍的ID" id="delete_book_id">
										<button class="uk-button uk-button-primary uk-button uk-margin-top uk-align-center" @click="deleteBook()">删除</button>
									</div>
								</div>
							</div>
						</li>
					    <li  class="info uk-flex uk-flex-center uk-flex-middle" style="flex-direction: column">
							注销
						</li>
					</ul>
				</div>
			</div>
		</main>
		<footer class="foot">
			<div class="foot-down">
				<p>未经同意，不得转载本网站之所有文章信息及作品 i囡漫笔 版权所有</p>
				<p><a href="#">网上有害信息举报专区</a>  违法不良信息举报电话:+86-13145215384 关爱未成年举报热线:+86-13145215384</p>
				<p><a href="#">隐私声明</a> <a href="#">服务协议</a> <a href="#">COOKIES</a> Copyright © 2023-2024 i囡漫笔 版权所有</p>
			</div>
		</footer>
		<script src="js/Universal_Functions.js"></script>
		<script src="js/API_Configuration.js"></script>
		<script src="js/management/management.js"></script>
	</body>
</html>